<template>
	<view class="u-wrap">
		<cu-custom bgColor="bg-gradual-blue" :isBack="false">
			<!-- <block slot="backText">返回</block> -->
			<block slot="content">信息查询</block>
		</cu-custom>
		
		<view class='nav-list margin-top'>
			<navigator open-type="navigate" hover-class='none' :url="'../design?type=' + index" :class="'nav-li bg-index' + (index+1)"
			 v-for="(item, index) in Template" :key="index">
			  <!-- @click="NavChange" :data-cur="item.url" -->
				<view class="nav-name">{{item.name}}</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	import animal from "../info/animal.vue";	
	import plant from "../info/plant.vue";	
	import mini from "../info/mini.vue";	
	export default {
		components: {
			animal,
			plant,
			mini
		},
		name: 'Components',
		data() {
			return {
				Template:[{
						url: 'plant',
						name: '植物物种信息',
						color: ''
					},
					{
						url: 'animal',
						name: '动物物种信息',
						color: ''
					},
					{
						url: 'mini',
						name: '微生物物种信息',
						color: ''
					},
					{
						url: 'prev',
						name: '防控信息',
						color: ''
					}
				]
			}
		},
		methods: {
			NavChange: function(e) {
				console.log(e.currentTarget.dataset.cur)
				
				this.PageCur = e.currentTarget.dataset.cur;
				
				this.$router.push(
				        "pages/info/"+ this.PageCur+".vue"
				      );
			}
		}
	}
</script>

<style>
	.nav-list {
		flex-wrap: wrap;
		width: 200%;
		height: 200rpx;
	}

	.nav-li {
		padding: 30upx;
		border-radius: 12upx;
		width: 45%;
		margin: 0 2.5% 40upx;
		background-image: url(https://s1.ax1x.com/2020/06/27/NyU04x.png);
		background-size: cover;
		background-position: center;
		position: relative;
		z-index: 1;
	}

	.nav-li::after {
		content: "";
		position: absolute;
		z-index: -1;
		background-color: inherit;
		width: 100%;
		height: 100%;
		left: 0;
		bottom: -10%;
		border-radius: 10upx;
		opacity: 0.2;
		transform: scale(0.9, 0.9);
	}

	.nav-li.cur {
		color: #fff;
		background: rgb(94, 185, 94);
		box-shadow: 4upx 4upx 6upx rgba(94, 185, 94, 0.4);
	}

	.nav-name {
		font-size: 28upx;
		text-transform: Capitalize;
		margin-top: 20upx;
		position: relative;
	}

	.nav-name::before {
		content: "";
		position: absolute;
		display: block;
		width: 40upx;
		height: 6upx;
		background: #fff;
		bottom: 0;
		right: 0;
		opacity: 0.5;
	}

	.nav-name::after {
		content: "";
		position: absolute;
		display: block;
		width: 100upx;
		height: 1px;
		background: #fff;
		bottom: 0;
		right: 40upx;
		opacity: 0.3;
	}

	.nav-name::first-letter {
		font-weight: bold;
		font-size: 36upx;
		margin-right: 1px;
	}

	.nav-li text {
		position: absolute;
		right: 30upx;
		top: 30upx;
		font-size: 52upx;
		width: 60upx;
		height: 60upx;
		text-align: center;
		line-height: 60upx;
	}

	
	/* 
  2f9bfe 主色蓝
  189eff 配色蓝
  
  0081ff--0070FF 蓝
  CCE6FF--E5F1FF 淡蓝
  39B54A--7FD02B 绿
  D7F0DB--EAF8F5 淡绿
  FBBD08--FFD627 黄
  f37b1d--F39902 橙
  FEF2CE--FEF6E9 淡橙
  1CBBB4--19CF8A 青
  E03997--FF4F94 粉
  8dc63f--9ddb47 橄榄绿
  e54d42--ff3434 红
  a5673f--7F2D00 棕
  6739b6--6F68DF 蓝紫
  */


	.name-title-a {
		-webkit-line-clamp: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.name-title-b {
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	
	.bg-index1 {
		background-color: #66849E;
		color: #fff;
	}

	.bg-index2 {
		background-color: #2A3950;
		color: #fff;
	}

	.bg-index3 {
		background-color: #E4483B;
		color: #fff;
	}
	
	.bg-index4 {
		background-color: #019B67;
		color: #fff;
	}


	
</style>

